<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="assets/stylesheets/comm.css">
    <link rel="stylesheet" href="assets/stylesheets/foot.css">
</head>
<body>
<!--头部-->
<div class="html_header">
    <a href="index.html">
    <img src="assets/images/index/logo.png" class="header_img"/>
    </a>
    <label class="gray_color html_header_label">已有云上雄关账号？<a class="main_color" href="login.html">去登录</a></label>
</div>
<!--中心内容-->
<div class="user_register_div">
    <div class="content_div">
        <div class="title_large_fontsize lt_gray_color">欢迎注册云上雄关</div>
        <form class="br_div register_form" id="register_form" action="">
            <div class="relative_position margin_register_top_first">
                <input class="btn_div form_input" placeholder="设置用户名" name="username"/>
                <div class="form_mess">
                    <ul>
                    <li>用户名长度为3-20个字符</li>
                    <li>支持字母（区分大小写）数字及下划线</li>
                    </ul>
                </div>
                <div class="form_mess">
                </div>
            </div>
            <div class="margin_form_middle relative_position">
                <input class="btn_div form_input" placeholder="设置您的登录密码" name=""/>
                <!--<span class="span_error" style="position: absolute;display: inline-table;line-height: 36px;color: red;margin-left: 10px"></span>-->
                <div class="form_mess">
                    <ul>
                        <li>密码长度为6-18个字符</li>
                        <li>支持字母（区分大小写）数字及下划线及特殊字符</li>
                    </ul>
                </div>
            </div>
            <div class="margin_form_middle relative_position">
                <input class="btn_div form_input" placeholder="再次输入您的密码" name=""/>
                <div class="form_mess">
                    <ul>
                        <li>请再次输入您的密码</li>
                    </ul>
                </div>
            </div>
            <div class="margin_form_middle">
                <input class="btn_div form_input" placeholder="输入手机号码" name=""/>
            </div>
            <div class="margin_form_middle relative_position">
                <input class="btn_div form_input" placeholder="输入短信验证码" maxlength="6" name=""/>
                <div class="get_mess_btn">获取短信验证码</div>
            </div>
            <div class="margin_form_middle relative_position">
                <input class="btn_div form_input" placeholder="输入图片验证码" maxlength="4" name="code"/>
                <div class="get_mess_btn"><img src="assets/images/index/yanzm.png"/></div>
            </div>
            <div class="margin_form_middle height_lose checkbox_parent_div relative_position">
                <input type="checkbox" class="div_float_left checkbox_div" value="" name="check"/>
                <!--<div class="checkbox_div div_float_left"></div>-->
                <label class="div_float_left gray_color">我已阅读并同意"用户协议和隐私条款"</label>
            </div>
            <input type="submit" class="form_submit_btn margin_form_middle" value="注册"/>
        </form>
    </div>
</div>
</div>
<!--footer-->
<div class="footer">
    <div class="foot_body">
        <div>
            <img src="assets/images/foot/wechat.png"/>
            <div class="foot_txt">微信公众号</div>
        </div>
        <div>
            <img src="assets/images/foot/app.png"/>
            <div class="foot_txt">APP应用下载</div>
        </div>
        <p>
            嘉峪关，号称“天下第一雄关”，位于甘肃省嘉峪关市西5千米处最狭窄的山谷中部，城关两侧的城墙横穿沙漠戈壁，北连黑山悬壁长城，南接天下第一墩，是明长城最西端的关口，历史上曾被称为河西咽喉，因地势险要，建筑雄伟，有连陲锁钥之称。嘉峪关是古代“丝绸之路”的交通要塞，中国长城三大奇观之一（东有山海关、中有镇北台、西有嘉峪关）。
        </p>
    </div>
    <div class="foot_body">&copy;2012-2018嘉峪关xxxxx公司甘ICP备18043664号-18</div>
</div>
<script src="assets/javascripts/jquery-1.11.1.min.js"></script>
<script src="assets/javascripts/jquery.validate.min.js"></script>
<script>
    $("#register_form").validate({
        rules: {
            username: {
                required: true
            },
            code: {
                required: true
            },
            check: {
                required: true
            }
        },
        messages: {
            username: {
                required: "请输入用户名"
            },
            code: {
                required: "请输入验证码"
            },
            check: {
                required: "请输入验证码"
            }
        },
        submitHandler: function (form) {
            form.submit();
            validator.resetForm();
        }
    });
</script>
<script src="assets/javascripts/index.js"></script>
</body>
</html>